<template>
  <div>
    <heads></heads>
    <el-container>
      <div class="box">
        <el-row class="one">
          <el-col :xl="24" class="oneBox">
            <h1 class="hotNewTitle">新闻热点</h1>
            <div class="newsContent">
              <div class="hotNewContent">
                <!-- 新闻标题 -->
                <div class="newTitlebox" :data="tableData">
                  <div class="newImgleft">
                    <img src="../../assets/u138.png" alt="" />
                  </div>
                  <div class="newContentright">
                    <div class="newtitle">
                      <h3>新闻标题</h3>
                      <span>2024-12-2</span>
                    </div>
                    <div>
                      我们的团队拥有丰富的经验和专业知识，可以应对各种非成和需求:我门采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性扣可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的意争性势。
                    </div>
                    <div class="releasedCompany">
                      <span>发布公司：腾通讯科技公司</span>
                      <span>查看详情</span>
                    </div>
                  </div>
                </div>
                <!-- 日期 -->
                <div>
                  <template>
                    <div class="block" style="display: flex">
                      <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                      </el-date-picker>
                      <h2>选择日期</h2>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 新闻标题 -->
        <el-row class="one">
          <el-col :xl="24">
            <h1>新闻资讯</h1>
            <div class="newList" v-for="item in tableData" :key="item.index" style="margin-bottom:20px ;">
              <div class="newLis">
                <div class="newLisleft">
                  <img src="../../assets/u138.png" alt="" />
                </div>
                <div class="newLisright">
                  <div>
                    <h3>{{ item.title }}</h3>
                    <span>{{ item.releaseDate }}</span>
                  </div>
                  <div>
                    {{ item.content }}
                  </div>
                  <div class="releasedCompany">
                    <span>发布公司：{{ item.updateBy }}</span>
                    <span>查看详情</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <el-row class="page">
              <el-col class="">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="100"
                  class="pagecontent" background layout="prev, pager, next" :total="1000">
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="box2">
  
        <swiper></swiper>
        <el-row class="one">
          <el-col :xl="24" class="oneBox">
            <h1 class="hotNewTitle">新闻热点</h1>
            <div class="newsContent">
              <div class="hotNewContent">
                <!-- 新闻标题 -->
                <div class="newTitlebox" :data="tableData">
                  <div class="newImgleft">
                    <img src="../../assets/u138.png" alt="" />
                  </div>
                  <div class="newContentright">
                    <div class="newtitle">
                      <h3>新闻标题</h3>
                      <span>2024-12-2</span>
                    </div>
                    <div>
                      我们的团队拥有丰富的经验和专业知识，可以应对各种非成和需求:我门采用最先进的技术工具和方法，确保我们的解决方案在速度、安全性扣可靠性方面处于领先地位。我们不断投资于研发和培训，以保持在科技行业的意争性势。
                    </div>
                    <div class="releasedCompany">
                      <span>发布公司：腾通讯科技公司</span>
                      <span>查看详情</span>
                    </div>
                  </div>
                </div>
                <!-- 日期 -->
                <div>
                  <template>
                    <div class="block" style="display: flex">
                      <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                      </el-date-picker>
                      <h2>选择日期</h2>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 新闻标题 -->
        <el-row class="one">
          <el-col :xl="24">
            <h1>新闻资讯</h1>
            <div class="newList" v-for="item in tableData" :key="item.index" style="margin-bottom:20px ;">
              <div class="newLis">
                <div class="newLisleft">
                  <img src="../../assets/u138.png" alt="" />
                </div>
                <div class="newLisright">
                  <div>
                    <h3>{{ item.title }}</h3>
                    <span>{{ item.releaseDate }}</span>
                  </div>
                  <div>
                    {{ item.content }}
                  </div>
                  <div class="releasedCompany">
                    <span>发布公司：{{ item.updateBy }}</span>
                    <span>查看详情</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <el-row class="page">
              <el-col class="">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10"
                  class="pagecontent" background layout="prev, pager, next" :total="100">
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-container>
  </div>
</template>
<script>
import heads from "../../components/header/heads.vue";
import swiper from "../../components/swipwe.vue";
import { getxinwen } from '../../request/api/xinwen'
export default {
  components: {
    heads,
    swiper
  },
  data() {
    return {
      tableData: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    async getxw(page, pageSize) {
      let res = await getxinwen(`/api/news/page?page=${page}&pageSize=6`);
      console.log("接口res", res.data);
      this.tableData = res.data.rows
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getxw(val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getxw(val);
    },
  },
  created() {
    this.getxw(1);
  },
};
</script>
<style lang="scss" scoped>
// @import url("../../assets/reset.scss");
@import url("../../assets/news/newss.scss");

@media (min-width: 667px) and (max-width: 9999px) {
  .box {
    display: none;
  }
}

@media (min-width: 200px) and (max-width: 667px) {
  * {
    padding: 0;
    margin: 0;
  }
.newContentright{
  margin-left: 0 !important;
}
.pagecontent {
  display: none;
}
.newLisright{
  margin-left: 0 !important;
}
  .hotNewContent {
    display: inline-block;
  }

  div{
    width: 100% !important;
    padding: 3px;
    box-sizing: border-box;
  }
h2{
  width: 60px;
  font-size: 12px;
}
  .newTitlebox {
    display: block !important;
  }

  .newLis {
    // text-align: center; 
    display: block;
  }


  .box2 {
    width: 100%;
    height: 100%;
    display: none;
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>